<template lang="html">
  <div class="" v-loading="loading">
      <div class="tab1">
          <div class="title">款式信息</div>
          <div class="form">
              <div class="form_item">
                  <span> <i>*</i> 类型选择</span>
                  <el-select v-model="form.typeId" placeholder="请选择类型">
                    <el-option v-for="item in types" :key="item.id" :label="item.typeName" :value="item.id"></el-option>
                  </el-select>
              </div>
              <div class="form_item">
                  <span> <i>*</i> 款式名称</span>
                  <el-input v-model="form.styleName"></el-input>
              </div>
              <div class="form_item">
                  <span> <i>*</i> 款式图片</span>
                  <div class="images">
                    <el-upload action="" class="upload_img"  :file-list="imageFile" :auto-upload="false" list-type="picture-card" :on-change="handlePreview" :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                  </div>
              </div>
              <div class="form_item">
                  <span> <i>*</i> 添加材料</span>
                  <el-tag closable class="form_tag" v-for="item in aMaterial" v-if="item.checked" :key="item.id" :disable-transitions="false" size="medium" @close="tagClose(1,item.id)">{{item.name}}</el-tag>
                  <el-button type="primary" size="mini" @click="addTag(1)" plain>请选择</el-button>
              </div>
              <div class="form_item">
                  <span> <i>*</i> 添加颜色</span>
                  <el-tag closable class="form_tag" v-for="item in aColors" v-if="item.checked" :key="item.id" :disable-transitions="false" size="medium" @close="tagClose(2,item.id)">{{item.name}}</el-tag>
                  <el-button type="primary" size="mini" @click="addTag(2)" plain>请选择</el-button>
              </div>
              <div class="form_item">
                  <span> <i style="visibility:hidden">*</i> 添加蕾丝</span>
                  <el-tag closable class="form_tag" v-for="item in aLaces" v-if="item.checked" :key="item.id" :disable-transitions="false" size="medium" @close="tagClose(3,item.id)">{{item.name}}</el-tag>
                  <el-button type="primary" size="mini" @click="addTag(3)" plain>请选择</el-button>
              </div>
              <!-- <div class="form_item">
                  <span> <i style="visibility:hidden">*</i> 添加型号</span>
                  <el-tag :key="tag" v-for="tag in dynamicTags" closable class="form_tag" size="medium" :disable-transitions="false" @close="handleClose(1,tag)">{{tag}}</el-tag>
                  <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm"></el-input>
                  <el-button v-else class="button-new-tag" size="mini" @click="showInput">添加</el-button>
              </div> -->
              <div class="form_item">
                  <span> <i style="visibility:hidden">*</i> 添加尺码</span>
                  <el-tag :key="tag" v-for="tag in dynamicTags2" closable class="form_tag" size="medium" :disable-transitions="false" @close="handleClose(2,tag)">{{tag}}</el-tag>
                  <el-input class="input-new-tag" v-if="inputVisible2" v-model="inputValue2" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm2" @blur="handleInputConfirm2"></el-input>
                  <el-button v-else class="button-new-tag" size="mini" @click="showInput2">添加</el-button>
              </div>

          </div>

      </div>
      <div class="tab1">
          <div class="title">量体部位</div>
          <div class="table_body">
            <el-table :data="bodyData" border :header-cell-style="{background:'#f5f5f5',color:'#666'}" style="width: 100%">
              <el-table-column prop="positionName" label="部位名称" align="center"></el-table-column>
              <el-table-column label="参考值" align="center">
                <template slot-scope="scope">
                  <p>{{scope.row.minReference}} ~ {{scope.row.maxReference}}</p>
                </template>
              </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" v-show="scope.$index != 0" @click="upMove(scope.$index)" size="mini">上移</el-button>
                        <el-button type="primary" v-show="scope.$index != (bodyData.length-1)" @click="downMove(scope.$index)" size="mini">下移</el-button>
                        <el-button type="warning" v-show="scope.$index != 0" @click="topMove(scope.$index)" size="mini">置顶</el-button>
                        <el-button type="danger" @click="deleteBody(scope.$index)" size="mini">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="add_button">
              <el-button type="text" size="medium" @click="addTable1(1)">新增</el-button>
            </div>
          </div>
      </div>
      <div class="tab1">
          <div class="title">定制需求</div>
          <div class="table_body">
              <el-table :data.sync="demandData" border :header-cell-style="{background:'#f5f5f5',color:'#666'}" style="width: 100%">
                  <el-table-column prop="name" label="选项" align="center" width="200"></el-table-column>
                  <el-table-column label="参数" align="center">
                    <template slot-scope="scope">
                      <div class="">
                        <span v-for="(item,index) in scope.row.detail" v-if="item.check" :key="index">{{item.customDetailName}},</span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="name" label="是否为必选" align="center" width="100">
                    <template slot-scope="scope">
                      <el-switch v-model="scope.row.isSelect" :active-value="1" :inactive-value="2" active-color="#4196FF" inactive-color="#D7D7D7"></el-switch>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" align="center">
                      <template slot-scope="scope">
                          <el-button type="primary" @click="onEdit(scope.row.id,2)" size="mini">编辑</el-button>
                          <el-button type="danger" @click="onDelete(scope.$index,2)" size="mini">删除</el-button>
                      </template>
                  </el-table-column>
              </el-table>
              <div class="add_button">
                <el-button type="text" size="medium" @click="addTable1(2)">新增</el-button>
              </div>
          </div>

      </div>

      <div class="tab1">
          <div class="title">加购项目</div>
          <div class="table_body">
              <el-table :data.sync="shopData" border :header-cell-style="{background:'#f5f5f5',color:'#666'}" style="width: 100%">
                  <el-table-column prop="name" label="选项" align="center" width="200"></el-table-column>
                  <el-table-column label="参数" align="center">
                    <template slot-scope="scope">
                      <div class="">
                        <span v-for="(item,index) in scope.row.detail" v-if="item.check" :key="index">{{item.detailName}},</span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="isSelect" label="是否为必选" align="center" width="100">
                    <template slot-scope="scope">
                      <el-switch v-model="scope.row.isSelect" :active-value="1" :inactive-value="2" active-color="#4196FF" inactive-color="#D7D7D7"></el-switch>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" align="center" width="300">
                      <template slot-scope="scope">
                          <el-button type="primary" @click="onEdit(scope.row.id,3)" size="mini">编辑</el-button>
                          <el-button type="danger" @click="onDelete(scope.$index,3)" size="mini">删除</el-button>
                      </template>
                  </el-table-column>
              </el-table>
              <div class="add_button">
                <el-button type="text" size="medium" @click="addTable1(3)">新增</el-button>
              </div>
          </div>

          <div class="submit_form">
              <el-button type="primary" size="medium" @click="submit">提交</el-button>
          </div>
      </div>

      <el-dialog title="编辑定制需求" append-to-body v-loading="loading" :visible.sync="dialogVisible1">
          <el-table :data="[currentRowData]" border :header-cell-style="{background:'#f5f5f5',color:'#666'}" style="width: 100%">
              <el-table-column prop="name" label="部位名称" align="center" width="150"></el-table-column>
              <el-table-column label="选项" align="center" width="80">
                <template slot-scope="scope">
                  <p v-if="scope.row.selectRule == 1">单选</p>
                  <p v-if="scope.row.selectRule == 2">多选</p>
                </template>
              </el-table-column>
              <el-table-column label="参数" align="center">
                <template slot-scope="scope">
                  <div style="text-align:left">
                    <el-checkbox v-if="scope.row.detail.length != 0" v-for="item in scope.row.detail" :key="item.id" v-model="item.check">{{item.customDetailName}}</el-checkbox>
                  </div>
                </template>
              </el-table-column>
          </el-table>
          <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible1 = false">取 消</el-button>
              <el-button type="primary" @click="confirmEdit(2)">确 定</el-button>
          </span>
      </el-dialog>

      <el-dialog title="编辑加购项目" append-to-body v-loading="loading" :visible.sync="dialogVisible2">
          <el-table :data="[currentRowData2]" border :header-cell-style="{background:'#f5f5f5',color:'#666'}" style="width: 100%">
              <el-table-column prop="name" label="部位名称" align="center" width="150"></el-table-column>
              <el-table-column label="选项" align="center" width="80">
                <template slot-scope="scope">
                  <p v-if="scope.row.selectRule == 1">单选</p>
                  <p v-if="scope.row.selectRule == 2">多选</p>
                </template>
              </el-table-column>
              <el-table-column label="参数" align="center">
                <template slot-scope="scope">
                  <div style="text-align:left">
                    <el-checkbox v-if="scope.row.detail.length != 0" v-for="item in scope.row.detail" :key="item.id" v-model="item.check">{{item.detailName}}</el-checkbox>
                  </div>
                </template>
              </el-table-column>
          </el-table>
          <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible2 = false">取 消</el-button>
              <el-button type="primary" @click="confirmEdit(3)">确 定</el-button>
          </span>
      </el-dialog>

      <el-dialog :title="dialogTitle" v-loading="loading" append-to-body :visible.sync="dialogVisible">
          <ul class="dialog_ul">
            <li v-for="item in dialogData" :key="item.id"><el-checkbox v-model="item.checked">{{item.name}}</el-checkbox></li>
          </ul>
          <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="confirm">确 定</el-button>
          </span>
      </el-dialog>

      <el-dialog title="添加量体部位" v-loading="loading" append-to-body :visible.sync="dialogTableVisible">
          <el-table :data="tableData" ref="bodyTable" border :header-cell-style="{background:'#f5f5f5',color:'#666'}" style="width: 100%" @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="40"></el-table-column>
              <el-table-column prop="positionName" label="部位名称" align="center"></el-table-column>
              <el-table-column label="参考值" align="center">
                <template slot-scope="scope">
                  <p>{{scope.row.minReference}} ~ {{scope.row.maxReference}}</p>
                </template>
              </el-table-column>
          </el-table>
          <span slot="footer" class="dialog-footer">
              <el-button @click="dialogTableVisible = false">取 消</el-button>
              <el-button type="primary" @click="confirm2">确 定</el-button>
          </span>
      </el-dialog>

      <el-dialog title="定制需求" v-loading="loading" append-to-body :visible.sync="dialogTableVisible2">
          <el-table :data="tableData2" border ref="demandTable" :header-cell-style="{background:'#f5f5f5',color:'#666'}" style="width: 100%" @selection-change="handleSelectionChange2">
              <el-table-column type="selection" width="40"></el-table-column>
              <el-table-column prop="name" label="部位名称" align="center" width="150"></el-table-column>
              <el-table-column label="选项" align="center" width="80">
                <template slot-scope="scope">
                  <p v-if="scope.row.selectRule == 1">单选</p>
                  <p v-if="scope.row.selectRule == 2">多选</p>
                </template>
              </el-table-column>
              <el-table-column label="参数" align="center">
                <template slot-scope="scope">
                  <div style="text-align:left">
                    <el-checkbox v-if="scope.row.detail.length != 0" v-for="item in scope.row.detail" :key="item.id" v-model="item.check">{{item.customDetailName}}</el-checkbox>
                  </div>
                </template>
              </el-table-column>
          </el-table>
          <span slot="footer" class="dialog-footer">
              <el-button @click="dialogTableVisible2 = false">取 消</el-button>
              <el-button type="primary" @click="confirm2">确 定</el-button>
          </span>
      </el-dialog>
      <el-dialog title="加购项目" v-loading="loading" append-to-body :visible.sync="dialogTableVisible3">
          <el-table :data="tableData3" ref="shopTable" border :header-cell-style="{background:'#f5f5f5',color:'#666'}" style="width: 100%" @selection-change="handleSelectionChange3">
              <el-table-column type="selection" width="40"></el-table-column>
              <el-table-column prop="name" label="部位名称" align="center" width="150"></el-table-column>
              <el-table-column label="选项" align="center" width="80">
                <template slot-scope="scope">
                  <p v-if="scope.row.selectRule == 1">单选</p>
                  <p v-if="scope.row.selectRule == 2">多选</p>
                </template>
              </el-table-column>
              <el-table-column label="参数" align="center">
                <template slot-scope="scope">
                  <div style="text-align:left">
                    <el-checkbox v-if="scope.row.detail.length != 0" v-for="(item,index) in scope.row.detail" :key="index" v-model="item.check">{{item.detailName}}</el-checkbox>
                  </div>
                </template>
              </el-table-column>
          </el-table>
          <span slot="footer" class="dialog-footer">
              <el-button @click="dialogTableVisible3 = false">取 消</el-button>
              <el-button type="primary" @click="confirm2">确 定</el-button>
          </span>
      </el-dialog>

  </div>
</template>

<script>
export default {
  data(){
    return {
      loading:false,
      types: [],
      aMaterial: [],
      aColors:[],
      aLaces:[],
      dialogData:[],
      dialogTitle: '',
      dialogTitle2:'',
      imageFile:[],
      form:{},
      inputVisible:false,
      inputValue: '',
      inputVisible2:false,
      inputValue2: '',
      dynamicTags: [],
      dynamicTags2: [],
      bodyData: [],
      shopData: [],
      demandData:[],
      tableData: [],
      tableData2: [],
      tableData3: [],
      currentData:[],
      currentData2:[],
      currentData3:[],
      currentRowData:[],
      currentRowData2:[],
      selectRows: [],
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      dialogTableVisible: false,
      dialogTableVisible2: false,
      dialogTableVisible3: false,
      dialogType: 1,
      dialogType2: 1,
    }
  },
  computed:{
    queryId: function() {
      return this.$route.query.id;
    }
  },
  async created(){
    await this.selectCommodityTypeList();
    await this.selectCommodityMaterialList();
    await this.selectCommodityColorList();
    await this.selectCommodityLaceList();
    if(this.queryId){
      this.selectCommodityStyle();
    }
  },
  methods: {
    async selectCommodityTypeList(){
      this.loading = true;
      let res = await this.$http.selectCommodityTypeList();
      this.loading = false;
      if(res.data.code == 0){
        this.types = [...res.data.data];
      }
    },
    async selectCommodityMaterialList(){
      this.loading = true;
      let res = await this.$http.selectCommodityMaterialList();
      this.loading = false;
      if(res.data.code == 0){
        res.data.data.forEach(item=>{
          this.aMaterial.push({id: item.id, name: item.materialName, checked:false})
        });
      }
    },
    async selectCommodityColorList(){
      this.loading = true;
      let res = await this.$http.selectCommodityColorList();
      this.loading = false;
      if(res.data.code == 0){
        res.data.data.forEach(item=>{
          this.aColors.push({id: item.id, name: item.colorName, checked:false});
        });
      }
    },
    async selectCommodityLaceList(){
      this.loading = true;
      let res = await this.$http.selectCommodityLaceList();
      this.loading = false;
      if(res.data.code == 0){
        res.data.data.forEach(item=>{
          this.aLaces.push({id: item.id, name: item.laceName, checked:false});
        });
      }
    },
    async selectPositionList(){
      this.loading = true;
      let res = await this.$http.selectPositionList();
      this.loading = false;
      if(res.data.code == 0){
        this.tableData = res.data.data;
        if(this.bodyData.length !== 0){
          this.bodyData.forEach(item=>{
              this.tableData.forEach(i=>{
                if(item.id == i.id){
                  this.$nextTick(() => {
                    this.$refs.bodyTable.toggleRowSelection(i);
                  });
                }
              });
          });

        }
      }
    },
    async selectCommodityCustomList(){
      this.loading = true;
      let res = await this.$http.selectCommodityCustomList();
      this.loading = false;
      if(res.data.code == 0){
        this.tableData2 = [];
        res.data.data.forEach((item,index)=>{
          this.tableData2.push({
            id: item.id,
            name: item.customName,
            selectRule: item.selectRule,
            detail: (()=>{
              let results = [];
              item.detail.forEach(i=>{
                results.push(Object.assign({check:false},i));
              });
              return results;
            })()
          });
        });
        if(this.demandData.length !== 0){
          this.demandData.forEach(item=>{
            this.tableData2.forEach(i=>{
              if(item.id == i.id){
                this.$nextTick(() => {
                  if(this.$refs.demandTable){
                    this.$refs.demandTable.toggleRowSelection(i);
                  }
                });
              }
              item.detail.forEach(itemDetail=>{
                i.detail.forEach(d=>{
                  if(itemDetail.customDetailId == d.customDetailId){
                    d.check = true;
                  }
                });
              });
            });
          });
          this.tableData2 = Object.assign([],this.tableData2);
        }

      }
    },
    async selectCommodityAdditionalList(){
      this.loading = true;
      let res = await this.$http.selectCommodityAdditionalList();
      this.loading = false;
      if(res.data.code == 0){
        this.tableData3 = [];
        res.data.data.forEach((item,index)=>{
          this.tableData3.push({
            id: item.additionalId,
            name: item.additionalName,
            selectRule: item.selectRule,
            detail: (()=>{
              let results = [];
              item.detail.forEach(i=>{
                results.push(Object.assign({check:false},i));
              });
              return results;
            })()
          });
        });
        if(this.shopData.length !== 0){
          this.shopData.forEach(item=>{
            this.tableData3.forEach(i=>{
              if(item.id == i.id){
                this.$nextTick(() => {
                  if(this.$refs.shopTable){
                    this.$refs.shopTable.toggleRowSelection(i);
                  }
                });
              }
              item.detail.forEach(itemDetail=>{
                i.detail.forEach(d=>{
                  if(itemDetail.additionDetailId == d.additionDetailId){
                    d.check = true;
                  }
                });
              });
            });
          });
          this.tableData2 = Object.assign([],this.tableData2);
        }

      }
    },
    async selectCommodityStyle(){
      this.loading = true;
      let res = await this.$http.selectCommodityStyle({id:this.queryId});
      this.loading = false;
      if(res.data.code == 0){
        this.$set(this.form,'typeId',res.data.data.typeId);
        this.$set(this.form,'styleName',res.data.data.styleName);
        this.imageFile.push({url :res.data.data.styleUrl});
        let materials = res.data.data.materials;
        let colors = res.data.data.colors;
        let laces = res.data.data.laces;
        if(materials&&materials.length !== 0){
          materials.forEach(m=>{
            this.aMaterial.forEach(item=>{
              if(m.materialId == item.id){
                item.checked = true;
              }
            });
          });
          this.aMaterial = Object.assign([],this.aMaterial);
        }
        if(colors&&colors.length !== 0){
          colors.forEach(m=>{
            this.aColors.forEach(item=>{
              if(m.colorId == item.id){
                item.checked = true;
              }
            });
          });
          this.aColors = Object.assign([],this.aColors);
        }
        if(laces&&laces.length !== 0){
          laces.forEach(m=>{
            this.aLaces.forEach(item=>{
              if(m.laceId == item.id){
                item.checked = true;
              }
            });
          });
          this.aLaces = Object.assign([],this.aLaces);
        }
        // if(res.data.data.models && res.data.data.models.length !== 0){
        //   res.data.data.models.forEach(item=>{
        //     this.dynamicTags.push(item.model);
        //   });
        // }
        if(res.data.data.sizes && res.data.data.sizes.length !== 0){
          res.data.data.sizes.forEach(item=>{
            this.dynamicTags2.push(item.size);
          });
        }
        if(res.data.data.positions && res.data.data.positions.length !== 0){
          res.data.data.positions.forEach(item=>{
            this.bodyData.push(item);
          });
        }
        if(res.data.data.customs && res.data.data.customs.length !== 0){
          res.data.data.customs.forEach(item=>{
            this.demandData.push({
              id: item.customId,
              name: item.customName,
              selectRule: item.selectRule,
              isSelect:item.isSelect,
              detail: (()=>{
                let results = [];
                item.detail.forEach(value=>{
                  results.push({
                    customDetailId: value.customDetailId,
                    customDetailName: value.customDetailName,
                    check: true
                  });
                });
                return results;
              })()
            });
          });
        }
        if(res.data.data.additionals && res.data.data.additionals.length !== 0){
            res.data.data.additionals.forEach(item=>{
              this.shopData.push({
                id: item.additionId,
                name: item.additionalName,
                selectRule: item.selectRule,
                isSelect:item.isSelect,
                detail: (()=>{
                  let results = [];
                  item.detail.forEach(value=>{
                    results.push({
                      additionDetailId: value.additionDetailId,
                      detailName: value.detailName,
                      check: true
                    });
                  });
                  return results;
                })()
              });
            });
        }

      }
    },
    addTag(n){
      this.dialogData = [];
      this.dialogType = n;
      if(n == 1){
        this.dialogData = this.strObjectExchange(this.aMaterial);
        this.dialogTitle = '添加材料';
      }else if(n == 2){
        this.dialogData = this.strObjectExchange(this.aColors);
        this.dialogTitle = '添加颜色';
      }else if(n == 3){
        this.dialogData = this.strObjectExchange(this.aLaces);
        this.dialogTitle = '添加蕾丝';
      }
      this.dialogVisible = true;
    },
    confirm(){
      if(this.dialogType == 1){
        this.aMaterial = this.strObjectExchange(this.dialogData);
      }else if(this.dialogType == 2){
        this.aColors = this.strObjectExchange(this.dialogData);
      }else if(this.dialogType == 3){
        this.aLaces = this.strObjectExchange(this.dialogData);
      }
      this.dialogVisible = false;
    },
    upMove(index){
      let data = this.bodyData[index];
      this.bodyData.splice(index,1);
      this.bodyData.splice((index-1),0,data);
    },
    downMove(index){
      let data = this.bodyData[index];
      this.bodyData.splice(index,1);
      this.bodyData.splice((index+1),0,data);
    },
    topMove(index){
      let data = this.bodyData[index];
      this.bodyData.splice(index,1);
      this.bodyData.splice(0,0,data);
    },
    deleteBody(index){
      this.$confirm('确认删除选中选项？','删除选项').then(res=>{
        this.bodyData.splice(index,1);
      })
    },
    addTable1(n){
      this.dialogType2 = n;
      if(n == 1){
        if(this.tableData.length == 0){
          this.selectPositionList();
        }
        this.dialogTableVisible = true;
        if (this.bodyData.length !== 0) {
            if(this.$refs.bodyTable){
              this.$refs.bodyTable.clearSelection();
            }
            this.bodyData.forEach(row => {
              this.tableData.forEach(item=>{
                if(row.id == item.id){
                  this.$refs.bodyTable.toggleRowSelection(item,true);
                }
              });
            });
        }
      }else if(n == 2){
        if(this.tableData2.length == 0){
          this.selectCommodityCustomList();
        }
        this.dialogTableVisible2 = true;
        if (this.demandData.length !== 0) {
            if(this.$refs.demandTable){
              this.$refs.demandTable.clearSelection();
            }
            this.demandData.forEach(row => {
              this.tableData2.forEach(item=>{
                if(row.id == item.id){
                  this.$nextTick(() => {
                    this.$refs.demandTable.toggleRowSelection(item,true);
                  });
                }
              });
            });
            if(this.tableData2.length != 0){
              this.tableData2.forEach(item=>{
                item.isSelect = 2;
                item.detail.forEach(d=>{d.check = false});
              });
              this.demandData.forEach(obj=>{
                this.tableData2.forEach(item=>{
                  if(obj.id == item.id){
                    item.detail = this.strObjectExchange(obj.detail);
                    item.isSelect = obj.isSelect;
                  }
                });
              });
            }

        }
      }else if(n == 3){
        if(this.tableData3.length == 0){
          this.selectCommodityAdditionalList();
        }
        this.dialogTableVisible3 = true;
        if (this.shopData.length !== 0) {
            if(this.$refs.shopTable){
              this.$refs.shopTable.clearSelection();
            }
            this.shopData.forEach(row => {
              this.tableData3.forEach(item=>{
                if(row.id == item.id){
                  this.$nextTick(() => {
                    this.$refs.shopTable.toggleRowSelection(item,true);
                  });
                }
              });
            });
            if(this.tableData3.length != 0){
              this.tableData3.forEach(item=>{
                item.isSelect = 2;
                item.detail.forEach(d=>{d.check = false});
              });
              this.shopData.forEach(obj=>{
                this.tableData3.forEach(item=>{
                  if(obj.id == item.id){
                    item.detail = this.strObjectExchange(obj.detail);
                    item.isSelect = obj.isSelect;
                  }
                });
              });
            }
        }
      }
    },
    confirm2(){
      if(this.dialogType2 == 1){
        this.bodyData = this.strObjectExchange(this.currentData);
      }else if(this.dialogType2 == 2){
        this.demandData = this.strObjectExchange(this.currentData2);
      }else if(this.dialogType2 == 3){
        this.shopData = this.strObjectExchange(this.currentData3);
      }
      this.dialogTableVisible = false;
      this.dialogTableVisible2 = false;
      this.dialogTableVisible3 = false;
    },
    onDelete(index,n){
      this.$confirm('确认删除选中选项？','删除选项').then(res=>{
        if(n == 2){
          this.demandData.splice(index,1);
        }else if(n == 3){
          this.shopData.splice(index,1);
        }
      });
    },
    confirmEdit(n){
      if(n == 2){
        this.demandData.forEach((item,index)=>{
          if(this.currentRowData.id == item.id){
            this.demandData[index] = this.strObjectExchange(this.currentRowData);
          }
        });
        this.demandData = Object.assign([],this.demandData);
        this.dialogVisible1 = false;
      }else{
        this.shopData.forEach((item,index)=>{
          if(this.currentRowData2.id == item.id){
            this.shopData[index]=this.strObjectExchange(this.currentRowData2);
          }
        });
        this.shopData = Object.assign([],this.shopData);
        this.dialogVisible2 = false;
      }
    },
    async getEditorData(id,n){
      if(n == 2){
        if(this.tableData2.length == 0){
          await this.selectCommodityCustomList();
        }
        this.demandData.forEach(item=>{
          if(item.id == id){
            this.currentRowData = this.strObjectExchange(item);
          }
        });
      }else{
        if(this.tableData3.length == 0){
          await this.selectCommodityAdditionalList();
        }
        this.shopData.forEach(item=>{
          if(item.id == id){
            this.currentRowData2 = this.strObjectExchange(item);
          }
        });
      }

    },
    onEdit(id,n){
      if(n == 2){
        this.getEditorData(id,n);
        this.dialogVisible1 = true;
      }else{
        this.getEditorData(id,n);
        this.dialogVisible2 = true;
      }

    },
    tagClose(n,id){
      if(n == 1){
        this.aMaterial.forEach(item=>{
          if(item.id == id){
            item.checked = false;
          }
        });
      }else if(n == 2){
        this.aColors.forEach(item=>{
          if(item.id == id){
            item.checked = false;
          }
        });
      }else if(n == 3){
        this.aLaces.forEach(item=>{
          if(item.id == id){
            item.checked = false;
          }
        });
      }
    },
    handlePreview(file){
      let formdata = new FormData();
      formdata.set('file', file.raw);
      this.loading = true;
      this.$http.insertCommodityStylePic(formdata).then(res=>{
        this.loading = false;
        if(res.data.code == 0){
          this.imageFile.push({
            uid: file.uid,
            url: res.data.data
          });
          this.$message.success('上传成功');
        }else{
          this.$message.error(res.data.message);
        }
      });
    },
    handleRemove(){
      this.imageFile = [];
    },
    submit(){
      if(!this.form.typeId){
        this.$message.error('请选择类型！！');
        return false;
      }
      if(!this.form.styleName){
        this.$message.error('请输入款式名称！！');
        return false;
      }
      if(this.imageFile.length == 0){
        this.$message.error('请上传款式图片！！');
        return false;
      }
      let materialIds = [];
      let colorIds = [];
      let laces = [];
      this.aMaterial.forEach(item=>{
        if(item.checked){
          materialIds.push(item.id);
        }
      });
      this.aColors.forEach(item=>{
        if(item.checked){
          colorIds.push(item.id);
        }
      });
      this.aLaces.forEach(item=>{
        if(item.checked){
          laces.push(item.id);
        }
      });
      if(materialIds.length == 0){
        this.$message.error('请选择材料！！');
        return false;
      }
      if(colorIds.length == 0){
        this.$message.error('请选择颜色！！');
        return false;
      }
      // if(laces.length == 0){
      //   this.$message.error('请选择蕾丝！！');
      //   return false;
      // }
      // if(this.dynamicTags.length == 0){
      //   this.$message.error('请添加型号！！');
      //   return false;
      // }
      if(this.bodyData.length == 0){
        this.$message.error('请添加量体部位！！');
        return false;
      }
      // if(this.demandData.length == 0){
      //   this.$message.error('请添加定制需求！！');
      //   return false;
      // }
      // if(this.shopData.length == 0){
      //   this.$message.error('请添加加购项目！！');
      //   return false;
      // }
      let positionIds = [];
      let custom = [];
      let additional = [];
      this.bodyData.forEach(item=>{
        positionIds.push(item.id);
      });
      if(this.demandData.length !== 0){
        this.demandData.forEach(item=>{
          custom.push({
            customId:item.id,
            isSelect:item.isSelect,
            detail: (()=>{
              let res = [];
              item.detail.forEach(d=>{
                if(d.check){
                  res.push(d.customDetailId)
                }
              });
              return res;
            })()
          });
        });
      }
      if(this.shopData.length !== 0){

        this.shopData.forEach(item=>{
          additional.push({
            additionalId:item.id,
            isSelect:item.isSelect,
            detail: (()=>{
              let res = [];
              item.detail.forEach(d=>{
                if(d.check){
                  res.push(d.additionDetailId)
                }
              });
              return res;
            })()
          });
        });
      }
      let data = {
        typeId: this.form.typeId,
        styleName: this.form.styleName,
        file: this.imageFile[0].url,
        materialIds: materialIds.join(','),
        colorIds: colorIds.join(','),
        laces: laces.join(','),
        models: this.dynamicTags.join(','),
        sizes: this.dynamicTags2.join(','),
        positionIds: positionIds.join(','),
        custom: JSON.stringify(custom),
        additional: JSON.stringify(additional)
      };
      // console.log(data);
      this.insertCommodityStyle(data);

    },
    async insertCommodityStyle(data){
      this.loading = true;
      let res = null;
      if(this.queryId){
        data.id = this.queryId;
        res = await this.$http.updateCommodityStyle(data);
      }else{
        res = await this.$http.insertCommodityStyle(data);
      }
      this.loading = false;
      if(res.data.code == 0){
        this.$message.success(res.data.message);
        this.$router.back();
      }else{
        this.$message.error(res.data.message);
      }
    },
    handleClose(n,val){
      if(n == 1){
        // this.dynamicTags = this.dynamicTags.filter(item=>item!=val);
      }else if(n == 2){
        this.dynamicTags2 = this.dynamicTags2.filter(item=>item!=val);
      }
    },
    showInput(){
      this.inputVisible = true;
    },
    showInput2(){
      this.inputVisible2 = true;
    },
    handleInputConfirm(){
      if (this.inputValue) {
        // this.dynamicTags.push(this.inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    },
    handleInputConfirm2(){
      if (this.inputValue2) {
        this.dynamicTags2.push(this.inputValue2);
      }
      this.inputVisible2 = false;
      this.inputValue2 = '';
    },
    arraySort(x,y){
      return (x.id)-(y.id);
    },
    handleSelectionChange(e){
      this.currentData = [];
      let sortArray = e.sort(this.arraySort);
      this.currentData = this.currentData.concat(sortArray);
    },
    handleSelectionChange2(eArray){
      if(this.demandData.length!=0 && eArray.length!=0){
        eArray.forEach(obj=>{
          this.demandData.forEach(item=>{
            if(obj.id == item.id){
              obj.isSelect = item.isSelect;
            }
          });
          this.tableData2.forEach(item=>{
            if(obj.id == item.id){
              obj.detail = this.strObjectExchange(item.detail);
            }
          });
        });
      }else{
        this.tableData2.forEach(item=>{
          item.detail.forEach(d=>{d.check = false});
        });
      }
      this.currentData2 = [];
      let sortArray = eArray.sort(this.arraySort);
      this.currentData2 = this.currentData2.concat(sortArray);

    },
    handleSelectionChange3(eArray){
      if(this.shopData.length!=0 && eArray.length!=0){
        eArray.forEach(obj=>{
          this.shopData.forEach(item=>{
            if(obj.id == item.id){
              obj.isSelect = item.isSelect;
            }
          });
          this.tableData3.forEach(item=>{
            if(obj.id == item.id){
              obj.detail = this.strObjectExchange(item.detail);
            }
          });
        });
      }else{
        this.tableData3.forEach(item=>{
          item.detail.forEach(d=>{d.check = false});
        });
      }
      this.currentData3 = [];
      let sortArray = eArray.sort(this.arraySort);
      this.currentData3 = this.currentData3.concat(sortArray);
    },

    strObjectExchange(obj){
      return JSON.parse(JSON.stringify(obj));
    }

  }
}
</script>

<style lang="css" scoped>
i{font-style: normal}
.tab1{
  background: #fff;
  margin-bottom: 10px;
  box-sizing: border-box;
  border: 1px solid #E8E8E8;
}
.form{
  padding: 20px 0;
  margin-left: 50px;
}
.form .form_item{
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  flex-wrap: wrap;
}
.form_item .input-new-tag,.form_item .button-new-tag{
  margin-bottom: 10px;
}
.form .form_item>span:nth-of-type(1){
  font-size: 13px;
  color: #333333;
  height: 28px;
  margin-right: 10px;
  display: inline-block;
  line-height: 26px;
  margin-bottom: 10px;
}
.form .form_tag{
  margin-right: 10px;
  margin-bottom: 10px;
}
/deep/.form_item .el-button--primary.is-plain{
  margin-bottom: 10px;
}
.tab1 i{
  color: #FB3F3F;
}
.form_item .el-input{
  width: 200px
}
.title{
  width: 100%;
  color: #4196FF;
  padding: 12px 15px;
  background-color:#DAEBFF;
  box-sizing: border-box;
}
.form2 .form_title{
  font-size: 13px;
  color: #333333;
  margin-right: 10px;
  line-height: 60px;
  height: 40px;
  margin-left: 50px
}
.upload_img{
  width: 100px;
  height: 100px;
  overflow: hidden;
  margin-right: 10px;
}
/deep/.upload_img .el-upload-list--picture-card .el-upload-list__item{
  width: 100%;
  height: 100%;
}
/deep/.upload_img .el-upload{
  width: 100px;
  height: 100px;
  line-height: 110px;
}
.images{
  margin-top: 10px;
}
.submit_form{
  margin-top: 20px;
  text-align: center;
  margin-bottom: 30px;
}
.table_body{
  padding: 20px;
  width: 1000px;
}
.table_body .add_button{
  border: 1px solid #EBEEF5;
  border-top: none;
  line-height: 45px;
  text-align: center;
}
.dialog_ul{
  display: flex;
  flex-wrap: wrap;
}
.dialog_ul li{
  text-align: center;
  line-height: 30px;
  margin-right: 20px
}
</style>
